<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>添加类别</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="../../../component/elementUI/index.css" />
    <link rel="stylesheet" href="../../../style/wangeditor.css" />
    <link rel="stylesheet" href="../../../style/index.css" />
    <style>
      /* .el-descriptions-item__label {
            width: 300px;
        } */
      .upload_file.none .el-upload {
        display: none;
      }
    </style>
  </head>

  <body>
    <div id="app" v-cloak>
      <yl-page-header content="添加专家"></yl-page-header>
      <el-form
        :model="form"
        :rules="rules"
        ref="contract"
        inline-message="true"
        style="width: 100%"
      >
        <div class="table_titel">
          <div class="titel">添加专家</div>
        </div>
        <el-descriptions :column="1" border size="small">
          <el-descriptions-item label="专家照片">
            <el-form-item prop="Image">
              <el-upload
                :limit="1"
                :file-list="fileList"
                :class="['upload_file', {'none': fileList?.length }]"
                list-type="picture-card"
                :before-upload="handleBeforeUpload"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <!-- <yl-upload :base="Domain_Business" unslider v-model.trim="form.Picture_URL"></yl-upload> -->
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="专家名称">
            <el-form-item prop="Expert_Name">
              <el-input
                v-model.trim="form.Expert_Name"
                placeholder="请输入专家名称"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="职位">
            <el-form-item prop="Expert_Type_Name">
              <el-input
                v-model.trim="form.Expert_Type_Name"
                placeholder="请输入职位"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="联系电话">
            <el-form-item prop="Mobile">
              <el-input
                v-model.trim="form.Mobile"
                placeholder="请输入联系电话"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="地址">
            <el-form-item prop="">
              <el-cascader
                @change="handle"
                v-model.trim="form.value1"
                placeholder="请选择省/市/区"
                filterable
                clearable
                :options="city"
                style="width: 100%"
              ></el-cascader>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="详细地址">
            <el-form-item prop="Address">
              <el-input
                v-model.trim="form.Address"
                placeholder="请输入详细地址"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="备注">
            <el-form-item prop="Notes">
              <el-input
                v-model.trim="form.Notes"
                placeholder="请输入备注"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
        <div class="table_titel">
          <div class="titel">擅长类别</div>
          <div class="operation">
            <el-button
              type="primary"
              size="small"
              @click="add_business_expert_type"
              >新增</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="remove_business_expert_type"
              >删除</el-button
            >
          </div>
        </div>
        <el-descriptions
          :column="1"
          v-for="(item,index) in form.Children.business_expert_type"
          :key="index"
          border
          size="small"
        >
          <el-descriptions-item label="品牌">
            <el-form-item prop="Category_SerialNumber">
              <el-select
                clearable
                v-model.trim="item.Category_SerialNumber"
                placeholder="请选择商品类别"
                filterable
                style="width: 100%"
              >
                <el-option
                  v-for="(item,index) in category.filter(x=>item.Category_SerialNumber==x.Category_SerialNumber||!form.Children.business_expert_type.some(i=>i.Category_SerialNumber==x.Category_SerialNumber))"
                  :key="index"
                  :label="item.Category_Name"
                  :value="item.Category_SerialNumber"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
        <div style="height: 90px"></div>
        <el-form-item class="form-operation">
          <el-button @click="window.history.back()">返回</el-button>
          <el-button
            type="primary"
            :loading="loading"
            @click="submitForm('contract')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script
      type="text/javascript"
      src="../../../utils/jquery.cookie.js"
    ></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script
      type="text/javascript"
      src="../../../component/elementUI/index.js"
    ></script>
    <script
      type="text/javascript"
      src="../../../component/component.js"
    ></script>
    <script type="text/javascript" src="../../../config/config.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="js/add.js"></script>
  </body>
</html>
